<template>
	<div>
		<Tabs v-model="tabActiveName" :animated="false" @on-click="handleChangeTab">
			<TabPane label="员工账号" name="staff">
				<SuperTable path="" :columns="staffColumns">
					<template slot="header-left">
						<Button type="primary" @click="handleGoEdit('steup_overall_staff_edit')">新增员工账号</Button>
					</template>
				</SuperTable>
			</TabPane>
			<TabPane label="角色管理" name="role">
				<SuperTable ref="roleTable" path="API_SETTING_ROLE_LISTS" :pagination="false" :columns="roleColumns">
					<template slot="header-left">
						<Button type="primary" @click="handleGoEdit('steup_overall_staff_role')">新增身份角色</Button>
					</template>
				</SuperTable>
			</TabPane>
		</Tabs>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import SuperTable from '@/components/SuperTable.vue';
export default {
	name: 'staff',
	components: {
		SuperTable
	},
	data() {
		return {
			tabActiveName: 'staff',
			staffColumns: [
				{
					title: '用户名',
					key: 'username'
				},
				{
					title: '员工姓名',
					key: 'realname'
				},
				{
					title: '手机号',
					key: 'phone'
				},
				{
					title: '所属角色',
					render: (h, params) => {
						if(params.row.id == 0) {
							return h('span', {
								attrs: {
									className: 'ui-text-primary'
								}
							}, '超级管理员')
						}
						return h('span', '其他');
					}
				},
				{
					title: '最后登录时间',
					key: 'datetime'
				},
				{
					title: '登录次数',
					key: 'number'
				},
				{
					title: ' ',
					align: 'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									size: 'small',
									type: 'primary',
									disabled: params.row.id == 0
								},
								on: {
									click: () => {
										
									}
								}
							}, '配置'),
							h('Button', {
								props: {
									size: 'small',
									type: 'error',
									disabled: params.row.id == 0
								},
								style: {
									marginLeft: '5px'
								},
								on: {
									click: () => {
										
									}
								}
							}, '删除')
						])
					}
				}
			],
			roleColumns: [
				{
					title: '角色名',
					key: 'name',
					maxWidth: 120
				},
				{
					title: '角色权限',
					render: (h, params) => {
						let rules = params.row.node_info.map(item => {
							return item.title;
						})
						return h('span', rules.join('、'));
					}
				},
				{
					title: '角色人数',
					key: 'number',
					maxWidth: 90
				},
				{
					title: '最后更新时间',
					key: 'update_time',
					maxWidth: 160
				},
				{
					title: ' ',
					align: 'center',
					width: 124,
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									size: 'small',
									type: 'primary',
									disabled: params.row.id == 0
								},
								on: {
									click: () => {
										this.handleGoEdit('setup_staff_role', {id: params.row.id});
									}
								}
							}, '配置'),
							h('Button', {
								props: {
									size: 'small',
									type: 'error',
									disabled: params.row.id == 0
								},
								style: {
									marginLeft: '5px'
								},
								on: {
									click: () => {
										this.handleDeleteRole(params.row.id);
									}
								}
							}, '删除')
						])
					}
				}
			]
		}
	},
	created() {
		let active = localStorage.getItem('setup_staff_index_active');
		if(active) {
			this.tabActiveName = active;
		}
	},
	mounted() {
		
	},
	methods: {
		handleChangeTab(name) {
			localStorage.setItem('setup_staff_index_active', name);
		},
		handleGoEdit(name, query) {
			this.$router.push({name, query});
		},
		handleDeleteRole(id) {
			this.$Modal.confirm({
                title: '操作提示',
                content: '<p>是否确认删除此角色权限？</p>',
                onOk: () => {
                	Util.ajax.post(this.API['API_SETTING_ROLE_DESTROY'], {id: id}).then(() => {
                		this.$Message.success('删除成功');
                		this.$refs.roleTable.data = this.$refs.roleTable.data.filter(item => {
	                    	return item.id != id;
	                    })
                	}).catch(() => {
                		
                	})
                }
            });
		}
	}
}
</script>